<template>
  <div class="certification">
    <div class="container">
      <div class="header">成为机构</div>
      <template v-if="$util.isDef(status)">
        <auth-state
          v-if="status == 0 || status == 1 || status == 2 || status == 3"
          :data="init"
          :status_text="status_text"
          @again="handleAgain"
        ></auth-state>
        <auth-form
          :category="category"
          :status_text="status_text"
          :status="status"
          v-else-if="status == 4 || status == 5"
        ></auth-form>
      </template>
    </div>
  </div>
</template>

<script>
/**
 * status 认证状态
 * 0：禁用 认证通过之后禁用
 * 1：正常 认证通过
 * 2：待审 审核中
 * 3：驳回 认证失败
 * 4：未认证
 * 5：未认证 自定义驳回跳转
 */
import AuthForm from './components/authForm'
import AuthState from './components/authState'
export default {
  components: {
    AuthForm,
    AuthState
  },
  data() {
    return {
      status: null,
      status_text: '',
      init: '',
      school: '',
      category: ''
    }
  },
  mounted() {
    this.handleAuthInit()
  },
  methods: {
    handleAuthInit() {
      this.$api.getSchoolAuth(res => {
        this.status = res.data.auth_status
        this.status_text = res.data.auth_status_text
        this.init = res.data.auth_info
        this.category = res.data.category
      })
    },
    handleAgain(val) {
      this.status = val
    }
  }
}
</script>

<style lang="scss" scoped>
.certification {
  background-image: url('../../assets/images/teacher/teacher_auth_bg.png');
  background-position: top center;
  background-repeat: no-repeat;
  .header {
    height: 180px;
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 180px;
    background-image: url('../../assets/images/teacher/1.png');
    background-repeat: no-repeat;
    background-position: center;
  }
}
</style>
